<template>
  <Popup
    :show="investStore.openConfirmCancelOrder"
    @click-overlay="investStore.setOpenConfirmCancelOrder(false)"
    position="center"
    round
    teleport="body"
  >
    <div class="confirm-cancel-box column-center">
      <div class="cancel-title">撤单确认</div>
      <div class="content-box all--center">
        您即将撤销 本期
        <span class="highlight">{{ gameStore.latestGameData.value.periodsNumber }}</span>
        期
      </div>
      <div class="content-box all--center">
        所投注内容，合计
        <span class="highlight">{{ investStore.historyData.records.length }}</span>
        注
      </div>
      <div class="btn-box row-center">
        <div class="cancel all-center" @click="investStore.setOpenConfirmCancelOrder(false)">取消</div>
        <div class="confirm all-center" @click="handleOk">确认</div>
      </div>
    </div>
  </Popup>

  <!-- 撤单 -->
  <Popup
    :show="investStore.showCancelOrderPopup"
    position="bottom"
    :overlay="false"
    teleport="body"
    class="cancel-order"
  >
    <div class="shureAddcancel">
      <!--头部-->
      <div class="popup-top" @click="close">
        <div></div>
        <div class="pop-tailtext">投注撤单</div>
        <div class="pop-tp-right all-center">
          <Icon :size="20" color="#fff" name="arrow-down" />
        </div>
      </div>
      <!--撤单-->
      <div class="shurebox">
        <div class="shureli" v-for="(item, index) in investStore?.historyData?.records" :key="index">
          <div class="li0">
            {{ item.playTypeName }}
          </div>
          <div class="li1">{{ item.betContent }}</div>
          <div class="li2">{{ item.betAmount }}</div>
          <div class="li3">赔率{{ item.odds }}</div>
        </div>
        <div style="width: 100%; height: 50px"></div>
      </div>
    </div>
    <div class="popbtm-btnbox all-center" :class="{ 'lower-layer': investStore.openConfirmCancelOrder }">
      <div
        class="all-cancel-btn all-center"
        :class="{ 'disable-all-cancel-btn': investStore.historyData.records.length === 0 }"
        @click="investStore.setOpenConfirmCancelOrder(investStore.historyData.records.length > 0)"
      >
        全部撤销
        <!-- {{ investStore.historyData.records.length }} -->
      </div>
    </div>
  </Popup>
</template>

<script setup lang="ts">
import { useGameStore } from '@/stores/game'
import { useInvestStore } from '@/stores/invest'
import { Popup, Icon } from 'vant'

type Props = {
  chatroomCancelId: any
}

const props = defineProps<Props>()

const investStore = useInvestStore()

const emits = defineEmits(['closeCancelOrder'])

const gameStore = useGameStore()

investStore.findOrderPage()

const handleOk = async () => {
  await investStore.cancelBatchOrder(props.chatroomCancelId)

  emits('closeCancelOrder')
}

const close = () => {
  investStore.openCancelOrderPopup(false)

  emits('closeCancelOrder')
}
</script>

<style lang="less" scoped>
@import './common.less';

.confirm-cancel-box {
  width: 288px;
  border-radius: 15px;
  padding: 7px 0 14px;
  background: linear-gradient(180deg, #2e374c 0%, #181e2f 100%);

  .cancel-title {
    width: calc(100% - 30px);
    margin: 0 15px 12px;
    padding-bottom: 7px;
    text-align: center;
    font-size: 16px;
    color: rgba(208, 213, 255, 1);
    border-bottom: 1px solid rgba(71, 83, 113, 1);
  }

  .content-box {
    color: #fff;
    font-size: 14px;
    text-align: center;
  }

  .btn-box {
    margin-top: 20px;

    .cancel {
      // box-shadow: 0px 2px 2px 0px #617bd680, 0px -2px 0px 0px #9aafc2 inset;
      background-image: linear-gradient(to right, #a0a9c3, #e5ebf1);
      font-family: PingFang SC;
      font-size: 15px;
      color: #8089a6;
      width: 83px;
      height: 31px;
      border-radius: 5px;
      margin-right: 26px;
    }

    .confirm {
      // box-shadow: 0px 2px 5px 0px #ff2f2f80, 0px 1px 0px 0px #ff7470;
      background: linear-gradient(180deg, #7758fd 0%, #684dde 100%);
      font-family: PingFang SC;
      font-size: 15px;
      color: white;
      width: 83px;
      height: 31px;
      border-radius: 5px;
    }
  }
}

.cancel-order {
  height: 8.76rem;
  background: #f1f3f9;
  border-radius: 16px 16px 0 0;
}

.popbtm-btnbox {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 102px;
  z-index: 3000;
  padding-bottom: 15px;
  box-sizing: border-box;
  background: rgba(19, 21, 31, 1);

  .all-cancel-btn {
    background: linear-gradient(180deg, #7758fd 0%, #684dde 100%);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    width: 83px;
    height: 37px;
    color: white;
    font-size: 15px;
    border-radius: 5px;
  }

  .disable-all-cancel-btn {
    background: linear-gradient(180deg, #e5ebf1 0%, #a0a9c3 100%);
    box-shadow:
      0 2px 5px 0 #a0a9c3,
      0 1px 0 0 #a0a9c3;
  }
}

.highlight {
  color: rgba(255, 66, 66, 1);
}
</style>
